<template>
	<view class="my-assessment">
		<NavBar title="评价管理" bgc="#fff"/>
		<view class="top-info">
			<view class="num">
				<view class="pf"> {{score}} </view>
				<view class="xx">
					<view class="label">
						<uni-rate allow-half :value="score" size="16" margin="10" />
					</view>
					<view class="tips"> 根据最近30天评价计算所得 </view>
				</view>
			</view>
			<view class="switch">
				<view class="s-item" :class="star==item.star?'a-item':''" v-for="item in evaTab" :key="item" @tap="tapStar(item.star)"> {{item.name}} </view>
			</view>
		</view>
		<view class="assess-list" v-if="evaList.length">
			<view class="ass-item" v-for="(item, index) in evaList" :key="item">
				<view class="user-info">
					<view class="avatar">
						<image :src="item.member_avatar" class="a-img"/>
						<view class="user-name">
							<view class="name"> {{item.member_name}} </view>
							<view class="time"> {{item.create_time}} </view>
						</view>
					</view>
					<view class="xx">
						<view class="xx-item" :class="item.star>=xx?'a-xx-item':''" v-for="xx in 5" :key="xx + 'xx'"> </view>
					</view>
				</view>
				<view class="assess"> {{item.detail}} </view>
				<view class="img-box" @tap="previewImg(item.img)">
					<image :src="img" v-for="img in item.img" :key="img" class="img"/>
				</view>
				<view class="shop-recover" v-if="item.reply"> 商家回复：{{item.reply}} </view>
				<view class="btn-box" v-else>
					<view class="btn" @tap="openModal(item.order_id, index)"> 回复 </view>
				</view>
			</view>
		</view>
		<Empty txt="暂时没有评价~" v-else />
		<Modal title="评价回复" textarea="输入您的回复内容" ref="modalRef" @confirm="replyEva" />
	</view>
</template>

<script setup>
	import { computed, ref } from 'vue'
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import Modal from '@/components/Modal.vue'
	import NavBar from '@/components/NavBar.vue'
	import Empty from '@/components/Empty.vue'
	import { previewImg } from '@/utils/index.js'
	import { useShopStore } from '@/store/index.js'
	import { GetEvaListApi, GetEvaTotalApi, ReplyEvaApi } from '@/service/shop.js'
	const modalRef = ref()
	const evaTab = ref([])
	const star = ref()
	const page = ref(1)
	const pageSize = ref(15)
	const total = ref(0)
	const evaList = ref([])
	const score = computed(() => {
		const { shopInfo } = useShopStore()
		return shopInfo.comment_score
	})
	const tapStar = (e) => {
		if(e==star.value) return
		star.value = e
		page.value = 1
		evaList.value = []
		getEvaList()
	}
	const getEvaTotal = () => {
		GetEvaTotalApi().then(res => {
			evaTab.value = res
			star.value = res[0].star
			getEvaList()
		})
	}
	const getEvaList = () => {
		GetEvaListApi({star:star.value}).then(res => {
			total.value = res.total
			evaList.value.push(...res.data)
		})
	}
	const openModal = (id, index) => {
		orderId.value = id
		orderIndex.value = index
		modalRef.value.open()
	}
	// 回复评论
	const orderId = ref()
	const orderIndex= ref()
	const replyEva = (val) => {
		if(!val) return
		const params = {
			order_id: orderId.value,
			reply: val
		}
		ReplyEvaApi(params).then(res => {
			evaList.value[orderIndex.value].reply = val
			modalRef.value.close()
		})
	}
	onLoad(() => {
		getEvaTotal()
	})
	onReachBottom(() => {
		if(page.value*pageSize.value>=total.value) return
		page.value = page.value + 1
		getEvaList()
	})
</script>

<style lang="scss" scoped>
	.my-assessment {
		.top-info {
			padding: 10px 15px;
			background-color: #fff;
			margin-bottom: 10px;
			.num {
				display: flex;
				align-items: center;
				.pf {
					color: #FF3B1E;
					font-size: 26px;
					line-height: 19px;
					font-weight: bold;
					margin-right: 26px;
				}
				.xx {
					padding-left: 20px;
					border-left: 1px solid #eeeeee;
					.tips {
						color: #999999;
						margin-top: 5px;
						font-size: 12px;
						font-weight: 400;
						line-height: 19px;
					}
				}
			}
			.switch {
				display: grid;
				gap: 10px 15px;
				margin-top: 10px;
				grid-template-columns: repeat(3, 1fr);
				.s-item {
					height: 22px;
					color: #666666;
					font-size: 12px;
					font-weight: 400;
					line-height: 22px;
					text-align: center;
					background: #F0F0F0;
					border-radius: 4px 4px 4px 4px;
					&.a-item {
						color: #FF3B1E;
						font-size: 12px;
						font-weight: 400;
						background: #FFEFF1;
					}
				}
			}
		}
		.assess-list {
			padding: 0 15px;
			box-sizing: border-box;
			background-color: #FFFFFF;
			.ass-item {
				padding: 20px 0 10px;
				border-bottom: 1px solid #eeeeee;
				&:nth-last-of-type(1) {
					border-bottom: none;
				}
				.user-info {
					display: flex;
					align-items: center;
					margin-bottom: 9px;
					justify-content: space-between;
					.avatar {
						display: flex;
						.a-img {
							width: 32px;
							height: 32px;
							margin-right: 10px;
							border-radius: 50%;
						}
						.user-name {
							.name {
								color: #666666;
								font-size: 14px;
								font-weight: 500;
								line-height: 17px;
							}
							.time {
								color: #999999;
								font-size: 12px;
								font-weight: 400;
								line-height: 16px;
							}
						}
					}
					.xx {
						display: flex;
						.xx-item {
							width: 12px;
							height: 12px;
							margin-right: 4px;
							background: url('/static/icon/rider/xx.png') no-repeat center center;
							background-size: 100% 100%;
							&.a-xx-item {
								background: url('/static/icon/rider/a-xx.png') no-repeat center center;
								background-size: 100% 100%;
							}
						}
					}
				}
				.assess {
					font-weight: 400;
					font-size: 14px;
					color: #666666;
					line-height: 19px;
				}
				.img-box {
					display: grid;
					gap: 9px;
					grid-template-columns: repeat(3, 1fr);
					box-sizing: border-box;
					margin: 10px 0;
					.img {
						width: 100px;
						height: 100px;
						border-radius: 10px;
					}
				}
				.shop-recover {
					color: #999999;
					font-size: 14px;
					font-weight: 400;
					line-height: 19px;
					padding: 6px 10px;
					border-radius: 5px;
					background: #F4F4F4;
					margin-bottom: 10px;
					position: relative;
					&::before {
						display: block;
						content: '';
						position: absolute;
						top: -24px;
						left: 27px;
						width: 0;
						height: 0;
						border: 12px solid;
						border-color: transparent transparent #F4F4F4 transparent;
					}
				}
				.btn-box {
					display: flex;
					justify-content: end;
					.btn {
						width: 56px;
						height: 22px;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #FFFFFF;
						font-size: 12px;
						font-weight: 400;
						background: #FF3B1E;
						border-radius: 151px;
					}
				}
			}
		}
	}
</style>
